let opts = {
  year: "numeric",
  month: "2-digit",
  day: "2-digit",
  hour: "2-digit",
  minute: "2-digit",
  // second: "2-digit",
  hour12: false,
  hourCycle: "h23",
}

let res = Intl.DateTimeFormat("zh-CN", opts).format(new Date())
let time = res.replace(/\//g, "-")

const createHTML = (
  placename = "河南大学新区站",
  maskText = "【郑州市新型冠状病毒感染的肺炎疫情防控领导小组办公室】"
) => {
  return `<html>
  <head>
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"
    />
    <style>
        * {
          margin: 0;
          padding: 0;
        }
  
        body {
          width: 100vw;
          height: 100vh;
          overflow: hidden;
          background: #f4f4f4;
          font-family: "Helvetica Neue", Helvetica, sans-serif;
        }
  
        .back {
          position: fixed;
          top: 0;
          width: 200%;
          height: 306px;
          transform: translate(-25%, -50px);
          border-radius: 0 0 60% 60%;
          background: #01b72f;
          overflow: hidden;
        }
  
        .back .header {
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          font-size: 26px;
          color: #fff;
          font-weight: 500;
          line-height: 39px;
        }
  
        .dateclock-wrapper {
          position: absolute;
          top: 32vh;
          padding: 0 26px;
          width: calc(100% - 26px * 2);
          height: 74px;
          box-sizing: content-box;
          display: flex;
        }
  
        .dateclock-inner {
          flex: 1;
          height: 74px;
          border-radius: 3px;
          background: #fff;
          font-family: PingFangSC-Semibold, PingFang SC, "Helvetica Neue", Helvetica, sans-serif;
  
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 55px;
          letter-spacing: 5px;
          overflow: hidden;
        }
  
        .time-wrap {
          align-self: flex-start;
          position: relative;
          transition: 0.5s ease-in;
        }
  
        .time-wrap .item {
          height: 63px;
        }
  
        .colon {
          margin-top: -7px;
        }
  
        .date {
          font-size: 18px;
          line-height: 25px;
          font-weight: 500;
          color: #6c6c6c;
          text-align: center;
          position: absolute;
          width: 100%;
          top: 45vh;
        }
  
        .footer {
          position: fixed;
          bottom: 55px;
          left: 50%;
          margin-left: -128px;
          width: 256px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          font-size: 16px;
          border-radius: 22px;
          color: #2bc150;
          border: 1px solid #2bc150;
        }
  
        .mask {
          height: 100vh;
          position: fixed;
          inset: 0;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          align-items: center;
          color: #aaa;
          font-size: 15px;
          opacity: 0.15;
        }
  
        .mask .item {
          width: 50%;
          transform: rotate(-10deg);
        }
  
        .wave-wrap {
          width: 750px;
          position: absolute;
          inset: 0;
          display: flex;
          animation: wave linear 4s infinite;
          filter: blur(1px);
        }
  
        .wave1,
        .wave2 {
          width: 100vw;
          margin-top: 20px;
        }
  
        .wave1 {
          transform: translate3d(0, 0px, 0px);
        }
  
        @keyframes wave {
          0%,
          50.00001% {
            transform: translateX(-25%);
          }
  
          50%,
          100% {
            transform: translateX(25%);
          }
        }
      </style>
    </head>
    <body>
      <div class="back">
        <div class="header">
          <div class="username">姓名：<span class="surnames">姚</span>*</div>
          <div class="placename">${placename}</div>
        </div>
        <div class="wave-wrap">
          <svg
            class="wave1"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 750 528"
            width="750"
            height="528"
            preserveAspectRatio="xMidYMid meet"
            style="height: 100%; content-visibility: visible"
          >
            <defs>
              <clipPath id="__lottie_element_2">
                <rect width="750" height="528" x="0" y="0"></rect>
              </clipPath>
            </defs>
            <g clip-path="url(#__lottie_element_2)">
              <g transform="matrix(1,0,0,1,1029.136962890625,210)" opacity="1" style="display: block">
                <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                  <path
                    fill="rgb(244,244,244)"
                    fill-opacity="0.15"
                    d=" M-1075.875,112 C-1185.8819580078125,110.45099639892578 -1491.875,252 -1491.875,252 C-1491.875,252 -1305.875,362 -1305.875,362 C-1305.875,362 -359.875,374 -359.875,374 C-359.875,374 -119.875,264 -119.875,264 C-119.875,264 -119.875,116 -279.875,118 C-407.864990234375,119.5999984741211 -530.875,195 -699.875,198 C-863.8610229492188,200.91099548339844 -933.875,114 -1075.875,112z M-280.875,112 C-390.8819885253906,110.45099639892578 -696.875,252 -696.875,252 C-696.875,252 -510.875,362 -510.875,362 C-510.875,362 435.125,374 435.125,374 C435.125,374 675.125,264 675.125,264 C675.125,264 675.125,116 515.125,118 C387.135009765625,119.5999984741211 264.125,195 95.125,198 C-68.86100006103516,200.91099548339844 -138.875,114 -280.875,112z"
                  ></path>
                </g>
              </g>
              <g transform="matrix(1,0,0,1,1467.614013671875,212)" opacity="1" style="display: block">
                <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                  <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                    <path
                      fill="rgb(244,244,244)"
                      fill-opacity="0.12"
                      d=" M-1050.43798828125,124 C-1160.4449462890625,122.45099639892578 -1364.43798828125,228 -1364.43798828125,228 C-1364.43798828125,228 -1194.43798828125,354 -1194.43798828125,354 C-1194.43798828125,354 -136.43800354003906,330 -136.43800354003906,330 C-136.43800354003906,330 37.0620002746582,273 37.0620002746582,273 C37.0620002746582,273 -212.4250030517578,124 -372.43701171875,124 C-482,124 -558,195 -716.43798828125,200 C-826.0189819335938,203.45799255371094 -908.43798828125,126 -1050.43798828125,124z M-1729.43798828125,124 C-1839.4449462890625,122.45099639892578 -2043.43798828125,228 -2043.43798828125,228 C-2043.43798828125,228 -1873.43798828125,354 -1873.43798828125,354 C-1873.43798828125,354 -815.43798828125,330 -815.43798828125,330 C-815.43798828125,330 -641.93798828125,273 -641.93798828125,273 C-641.93798828125,273 -891.426025390625,124 -1051.43798828125,124 C-1161,124 -1237,195 -1395.43798828125,200 C-1505.01904296875,203.45799255371094 -1587.43798828125,126 -1729.43798828125,124z"
                    ></path>
                  </g>
                </g>
              </g>
            </g>
          </svg>
          <svg
            class="wave2"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 750 528"
            width="750"
            height="528"
            preserveAspectRatio="xMidYMid meet"
            style="height: 100%; content-visibility: visible"
          >
            <defs>
              <clipPath id="__lottie_element_2">
                <rect width="750" height="528" x="0" y="0"></rect>
              </clipPath>
            </defs>
            <g clip-path="url(#__lottie_element_2)">
              <g transform="matrix(1,0,0,1,1029.136962890625,210)" opacity="1" style="display: block">
                <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                  <path
                    fill="rgb(244,244,244)"
                    fill-opacity="0.15"
                    d=" M-1075.875,112 C-1185.8819580078125,110.45099639892578 -1491.875,252 -1491.875,252 C-1491.875,252 -1305.875,362 -1305.875,362 C-1305.875,362 -359.875,374 -359.875,374 C-359.875,374 -119.875,264 -119.875,264 C-119.875,264 -119.875,116 -279.875,118 C-407.864990234375,119.5999984741211 -530.875,195 -699.875,198 C-863.8610229492188,200.91099548339844 -933.875,114 -1075.875,112z M-280.875,112 C-390.8819885253906,110.45099639892578 -696.875,252 -696.875,252 C-696.875,252 -510.875,362 -510.875,362 C-510.875,362 435.125,374 435.125,374 C435.125,374 675.125,264 675.125,264 C675.125,264 675.125,116 515.125,118 C387.135009765625,119.5999984741211 264.125,195 95.125,198 C-68.86100006103516,200.91099548339844 -138.875,114 -280.875,112z"
                  ></path>
                </g>
              </g>
              <g transform="matrix(1,0,0,1,1467.614013671875,212)" opacity="1" style="display: block">
                <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                  <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                    <path
                      fill="rgb(244,244,244)"
                      fill-opacity="0.12"
                      d=" M-1050.43798828125,124 C-1160.4449462890625,122.45099639892578 -1364.43798828125,228 -1364.43798828125,228 C-1364.43798828125,228 -1194.43798828125,354 -1194.43798828125,354 C-1194.43798828125,354 -136.43800354003906,330 -136.43800354003906,330 C-136.43800354003906,330 37.0620002746582,273 37.0620002746582,273 C37.0620002746582,273 -212.4250030517578,124 -372.43701171875,124 C-482,124 -558,195 -716.43798828125,200 C-826.0189819335938,203.45799255371094 -908.43798828125,126 -1050.43798828125,124z M-1729.43798828125,124 C-1839.4449462890625,122.45099639892578 -2043.43798828125,228 -2043.43798828125,228 C-2043.43798828125,228 -1873.43798828125,354 -1873.43798828125,354 C-1873.43798828125,354 -815.43798828125,330 -815.43798828125,330 C-815.43798828125,330 -641.93798828125,273 -641.93798828125,273 C-641.93798828125,273 -891.426025390625,124 -1051.43798828125,124 C-1161,124 -1237,195 -1395.43798828125,200 C-1505.01904296875,203.45799255371094 -1587.43798828125,126 -1729.43798828125,124z"
                    ></path>
                  </g>
                </g>
              </g>
            </g>
          </svg>
        </div>
      </div>
  
      <div class="dateclock-wrapper">
        <div class="dateclock-inner">
          <div class="time-wrap hour1">
            <div class="item">0</div>
            <div class="item">1</div>
            <div class="item">2</div>
          </div>
          <div class="time-wrap hour2">
            <div class="item">0</div>
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
            <div class="item">7</div>
            <div class="item">8</div>
            <div class="item">9</div>
          </div>
          <div class="colon">:</div>
          <div class="time-wrap minute1">
            <div class="item">0</div>
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
          </div>
          <div class="time-wrap minute2">
            <div class="item">0</div>
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
            <div class="item">7</div>
            <div class="item">8</div>
            <div class="item">9</div>
          </div>
          <div class="colon">:</div>
          <div class="time-wrap second1">
            <div class="item">0</div>
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
          </div>
          <div class="time-wrap second2">
            <div class="item">0</div>
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
            <div class="item">7</div>
            <div class="item">8</div>
            <div class="item">9</div>
          </div>
        </div>
      </div>
  
      <div class="date">2022年03月31日</div>
  
      <div class="footer">查看行程卡</div>
  
      <div class="mask">
        <div class="item">${maskText}</div>
        <div class="item">${maskText}</div>
        <div class="item">${maskText}</div>
      </div>
    </body>
  <script>
  </script>
  </html>
  `
}

const renderPage = placename => {
  $ui.render({
    views: [
      {
        type: "web",
        props: {
          html: createHTML(placename),
          script: () => {
            function updatePlacename(placename) {
              document.querySelector(".placename").innerHTML = placename
            }

            function randomName() {
              let bookFamilyNames =
                "赵钱孙李周吴郑王冯陈褚卫蒋沈韩杨朱秦尤许何吕施张孔曹严华金魏陶姜戚谢邹喻柏水窦章"
              let random = Math.floor(Math.random() * bookFamilyNames.length)
              document.querySelector(".surnames").textContent = bookFamilyNames[random]
            }

            function updateTime() {
              let date = new Date("2020-09-09 03:04:20")
              date = new Date()
              let hour = date.getHours()
              let minute = date.getMinutes()
              let second = date.getSeconds()
              let nums = {
                hour1: Math.floor(hour / 10),
                hour2: hour % 10,
                minute1: Math.floor(minute / 10),
                minute2: minute % 10,
                second1: Math.floor(second / 10),
                second2: second % 10,
              }

              Object.keys(nums).forEach(key => {
                document.querySelector(`.${key}`).style.top = nums[key] * -63 + "px"
              })
            }

            randomName()

            updatePlacename(placename)

            setInterval(() => {
              updateTime()
            }, 1000)
          },
          toolbar: false,
        },
        layout: $layout.fill,
      },
    ],
  })
}

const subwayLocationList = [
  // { lng: 113.812286, lat: 34.797111, name: "永和龙子湖广场" },
  { lng: 113.819412, lat: 34.826345, name: "河南大学新区站" },
  { lng: 113.818827, lat: 34.814363, name: "文苑北路站" },
  { lng: 113.817104, lat: 34.798464, name: "龙子湖站" },
  { lng: 113.817037, lat: 34.778621, name: "市体育中心站" },
  { lng: 113.799026, lat: 34.765833, name: "博学路站" },
]

// 最近的三个地铁站
const getNearestThreeStation = (currlng, currlat, cb) => {
  const distanceBetween = ({ lng, lat }) => Math.hypot(lng - currlng, lat - currlat)
  let nearestDistance = Number.MAX_SAFE_INTEGER
  let nearestStation = -1

  let nearestThreeStation = new Array(3).fill({
    lng: Number.MAX_SAFE_INTEGER,
    lat: Number.MAX_SAFE_INTEGER,
  })

  subwayLocationList.forEach((v, i, arr) => {
    let distance = distanceBetween(v)
    if (distance < nearestDistance) {
      nearestDistance = distance
      nearestStation = i
    }

    if (distance < distanceBetween(nearestThreeStation[0])) {
      ;[nearestThreeStation[0], nearestThreeStation[1]] = [v, nearestThreeStation[0]]
    } else if (distance < distanceBetween(nearestThreeStation[1])) {
      ;[nearestThreeStation[1], nearestThreeStation[2]] = [v, nearestThreeStation[1]]
    } else if (distance < distanceBetween(nearestThreeStation[2])) {
      nearestThreeStation[2] = v
    }
  })

  let nearestThreeStationNameList = nearestThreeStation.map(v => v.name)
  cb(subwayLocationList[nearestStation].name, nearestThreeStationNameList)
}

let available = $location.available
if (!available) {
  $ui.alert({
    title: "获取当前位置失败",
  })
} else {
  $location.fetch({
    handler: function ({ lng, lat }) {
      getNearestThreeStation(lng, lat, (currNearestStation, nearestThreeStations) => {
        $ui.alert({
          title: "附件最近的地铁站是：",
          message: currNearestStation,
          actions: [
            {
              title: "是",
              disabled: false, // Optional
              style: $alertActionType.default, // Optional
              handler: function () {
                renderPage(currNearestStation)
              },
            },
            {
              title: "不是",
              style: $alertActionType.destructive, // Optional
              handler: function () {
                $ui.menu({
                  items: nearestThreeStations,
                  handler: function (title, idx) {
                    renderPage(title)
                  },
                  finished: function (cancelled) {},
                })
              },
            },
          ],
        })
      })
    },
  })
}
